/* eslint-disable */
import react, { Component } from "react";
import echarts from "echarts/lib/echarts";
require("echarts-extension-amap");
import _ from 'lodash';

// 迁徙图
export default class ChartMove extends Component {

  componentDidMount() {
    const { handleClick } = this.props;
    this.chart = echarts.init(document.getElementById("chartMove"));
    this.chart.on('click', (params) => {
      typeof handleClick === 'function' && handleClick(params);
    })
  }

  componentWillReceiveProps(nProps) {
    const { map, handleCreate, data } = nProps;
    if(!_.isEqual(map, this.props.map)) {
      map && map.plugin(['AMap.CustomLayer'], () => {
        this.chart.setOption(this.getOption(nProps));
        let amap = this.chart.getModel().getComponent("amap").getAMap();
        handleCreate && handleCreate(amap);
      })
    }
    if(!_.isEqual(data, this.props.data)) {
      this.chart.setOption(this.getOption(nProps));
    }
  }

  getSeries = (nProps) => {
    const { data } = nProps;

    let series = (data || []).map(m => {
      if(m.type === 'place') {
        return {
          name: m.name || "",
          type: "effectScatter",
          coordinateSystem: "amap",
          zlevel: 2,
          symbolSize: 44,
          symbolOffset: [8, 8],
          rippleEffect: {
            brushType: "stroke"
          },
          itemStyle: {
            normal: {
              color: m.color || "#a6c84c"
            }
          },
          data: [
            {
              name: m.name || "",
              value: [m.from[0], m.from[1], 50]
            }
          ]
        }
      }
      let res = [
        //闪动的线
        {
          name: m.flashName || "",
          coordinateSystem: "amap",
          type: "lines",
          zlevel: 1,
          effect: {
            show: true,
            period: 3,
            trailLength: 0.02,
            color: m.flashColor || '#fff',
            symbolSize: 5,
            symbol: 'arrow', //箭头图标
          },
          lineStyle: {
              normal: {
                  width: 0,
                  curveness: 0.2
              }
          },
          data: [
            {
              fromName: "",
              toName: "",
              coords: [m.from, m.to],
              value: m.value
            }
          ]
        },
        //轨迹
        {
          name: m.lineName || "",
          coordinateSystem: "amap",
          type: "lines",
          zlevel: 2,
          symbol: [
            "none",
            "arrow"
          ],
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: m.lineColor || "#4BD0FF",
              width: 2,
              opacity: 0.7,
              curveness: 0.2
            }
          },
          data: [
            {
              fromName: "",
              toName: "",
              coords: [m.from, m.to],
              "value": m.value
            }
          ]
        },

        // 圆点
        {
          name: m.roundName || "",
          type: "effectScatter",
          coordinateSystem: "amap",
          zlevel: 2,
          symbolSize: 10,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            normal: {
              show: true,
              position: "bottom",
              formatter: "{b}"
            }
          },
          itemStyle: {
            normal: {
              color: m.roundColor || "#a6c84c"
            }
          },
          data: [
            {
              name: "",
              value: [m.from[0], m.from[1], 50]
            }
          ]
        }]
      return res
    })

    return _.flattenDeep(series)
  }

  getOption = (nProps) => {
    return {
      amap: {
        pitch: 55, //45 俯仰角
        viewMode: '3D',
        zoom: 10,
        expandZoomRange: true,
        zooms: [3, 20],
        mapStyle: 'amap://styles/a7a309468692d4b7786789137e26da9c', //地图主题
        center: [120.633541, 29.803041], //中心点
        rotation: 0,  //顺时针旋转角度
        resizeEnable: true,
      },
      series: this.getSeries(nProps)
    }
  }

  render() {
    return (
      <div id="chartMove" style={{ height: '100vh', width: '100vw', zIndex: 9999 }}></div>
    );
  }

}
